<template>
  <section class="layout-default">
    <home-header></home-header>
    <home-page :trendingList="trendingList"></home-page>
    <home-footer></home-footer>
  </section>
</template>

<script>
import axios from 'axios'
import HomeHeader from '@/common/components/Header'
import HomePage from './components/Page'
import HomeFooter from './components/Footer'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomePage,
    HomeFooter
  },
  data () {
    return {
      trendingList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/home.json').then(res => {
        console.log(res)
        let data = res.data.trending.trendingNow.data
        data.forEach((item, index) => {
          this.trendingList.push(item.object.data)
        })
      })
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style scoped>
  .layout-default {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
